<template>
    <div>
        <div class="p-user-center p-change-pwd" style="min-height:100%;">
            <div class="back-ground">
            </div>
            <div class="page-body">
                <div class="user-profile">
                    <div class="avatar">
                        <div class="c-face-img-con c-face-img" style="width: 160px; height: 160px;">
                            <img class="personalImg" :src="imgUrl+user.userImg" alt="" title=""
                                 style="border-radius: 50%;">
                        </div>
                    </div>
                    <div class="user-info">
                        <div class="name-row">
                            <span class="name">{{user.username}}</span>
                            <a target="_self" href="/personalPage" class="user-home-link">
                                个人页面&gt;&gt;
                            </a>
                        </div>
                        <div class="describe">
                            {{user.introduction}}
                        </div>
                        <a title="修改个人资料" href="personalSetting" class="icon-edit">
                            <i class="el-icon-edit"></i>
                        </a>
                    </div>
                </div>
                <div class="content-area">
                    <div class="left-nav">
                        <a href="/myLikes" :class="{active:shows==1}" class="nav-item">
                            <i class="fonts icon-favorites-fill"></i>
                            我喜欢的
                        </a>
                        <a href="/personalWorks" :class="{active:shows==2}" class="nav-item">
                            <i class="fonts el-icon-s-management"></i>
                            作品管理
                        </a>
                        <a href="/myDemands" :class="{active:shows==7}" class="nav-item">
                            <i class="fonts el-icon-s-promotion"></i>
                            我的需求
                        </a>
                        <a href="/myOrders" :class="{active:shows==3}" class="nav-item">
                            <i class="fonts el-icon-s-order"></i>
                            我的订单
                        </a>
                        <!--                        <a href="" :class="{active:shows==4}" class="nav-item">-->
                        <!--                            <i class="fonts el-icon-message-solid"></i>-->
                        <!--                            最新消息-->
                        <!--                        </a>-->
                        <a href="/personalSetting" :class="{active:shows==5}" class="nav-item">
                            <i class="fonts el-icon-s-tools"></i>个人设置
                        </a>
                        <a href="/changePassword" :class="{active:shows==6}" class="nav-item">
                            <i class="fonts el-icon-key"></i>
                            修改密码
                        </a>
                    </div>
                    <div class="content-header">
                        <div class="header-toolbar">
                            <span>我的订单</span>
                        </div>

                    </div>
                </div>
                <div>
                    <el-form class="content-body" label-width="80px">
                        <div class="root-provider">
                            <div class="div1">
                                <div class="div2" v-if="orders.length != 0 && order.demands!=null"
                                     v-for="(order,index) in orders"
                                     :key="index">
                                    <div style="font-weight: 700">订单信息</div>
                                    <hr>
                                    <div class="order-orderInfo">
                                        <span>需求用户:&nbsp;</span>
                                        <a href="" target="_self">{{order.demandUsername}}</a>
                                        &nbsp;&nbsp;&nbsp;
                                        <span>接单用户:&nbsp;</span>
                                        <a href="" target="_self">{{order.receiveUsername}}</a>
                                    </div>
                                    <div style="padding: 0px;">
                                        <div class="item-row">
                                            <div class="order-itemInfo">
                                                <div class="info-detail info-cell">
                                                    <div class="info-cell info-msg">
                                                        <a :href="'/demandDetails?id='+order.demands.demandId+''" target="_self" class="info-title">
                                                            需求：{{order.demands.demands}}
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="info-require info-cell">
                                                    需求详情：{{order.demands.requirements}}
                                                </div>
                                                <div class="info-price info-cell">定金：{{order.deposit}}</div>
                                            </div>
                                            <div class="item-row__price">
                                                <div class="label item-row__price-item">
                                                        <span style="font-weight: bold;font-style: normal;text-decoration: none;
                                                            color: rgb(173,179,251); font-size: 14px; min-width: 100px;">
                                                        尾款：{{order.balancePayment}}
                                                        </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="padding: 0px; border-top: 1px solid rgb(255, 255, 255);">
                                        <div style="padding: 0px; border-top: 1px solid rgb(173,179,251);">
                                            <span class="span-remarks">
                                                承接者备注：&nbsp;&nbsp;&nbsp;{{order.receiveRemarks}}<br/>
                                            </span>
                                            <span class="span-remarks">
                                                需求者备注：&nbsp;&nbsp;&nbsp;{{order.demandRemarks}}<br/>
                                            </span>
                                            订单编号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{order.orderNum}}

                                            <div style="display: flex; flex-direction: column; justify-content: flex-end;
                                                 align-items: flex-end; margin: 0px; padding: 10px 0px;">
                                                <span style="margin-top: -40px"
                                                      v-if="order.demandUsername == user.username && order.status != 6 && order.status != 5 && order.status != 4">
                                                    <el-input
                                                            style="width: 200px;"
                                                            type="textarea"
                                                            placeholder="添加备注"
                                                            v-model="order.demandRemarks"
                                                            :autosize="{ minRows: 2}"
                                                            maxlength="500"
                                                            show-word-limit>
                                                    </el-input>
                                                    &nbsp;
                                                    <el-button @click="addDemandRemarks(order)"
                                                               style="background-color: rgb(173,179,251);color: #ffffff">
                                                确认添加
                                            </el-button>
                                                </span>
                                                <span style="margin-top: -40px"
                                                      v-else-if="order.receiveUsername == user.username  && order.status != 6 && order.status != 5 && order.status != 4">
                                                    <el-input
                                                            style="width: 200px;"
                                                            type="textarea"
                                                            placeholder="添加备注"
                                                            v-model="order.receiveRemarks"
                                                            :autosize="{ minRows: 2}"
                                                            maxlength="500"
                                                            show-word-limit>
                                                    </el-input>
                                                    &nbsp;
                                                    <el-button @click="addReceiveRemarks(order)"
                                                               style="background-color: rgb(173,179,251);color: #ffffff">
                                                        确认添加
                                                    </el-button>
                                                </span>
                                                <div style="padding: 0px;">
                                                    <div class="label">
                                                        <span class="label__header"
                                                              style="font-weight: normal; font-style: normal; text-decoration: none; font-size: 14px; min-width: 100px; margin-right: 10px;">
                                                            总价
                                                        </span>
                                                        <span style="font-weight: bold; font-style: normal; text-decoration: none; color: rgb(173,179,251); font-size: 14px; min-width: 100px;">
                                                            ￥{{order.totalPrice}}
                                                        </span>
                                                    </div>
                                                </div>
                                                <span v-if="order.status === -1">
                                                    <sapn @click="toReceiveOrder(order)"
                                                          v-if="order.demandUsername === user.username">
                                                    已拒绝应征
                                                    </sapn>
                                                    <span v-else>
                                                    应征已被拒绝
                                                    </span>
                                                </span>

                                                <span v-else-if="order.status === 0">
                                                    <el-button class="go-btn"
                                                               style="background-color: rgb(173,179,251);"
                                                               @click="toReceiveOrder(order)"
                                                               v-if="order.demandUsername === user.username">
                                                    接受应征
                                                    </el-button>
                                                    <el-button class="go-btn"
                                                               style="background-color: rgb(173,179,251);"
                                                               @click="toRejectOrder(order)"
                                                               v-if="order.demandUsername === user.username">
                                                    拒绝应征
                                                    </el-button>
                                                    <span v-else>
                                                    等待需求方接受应征
                                                    </span>
                                                </span>

                                                <span v-else-if="order.status === 1">
                                                    <el-button class="go-btn"
                                                               style="background-color: rgb(173,179,251);"
                                                               v-if="order.demandUsername === user.username"
                                                               @click="pay(order)">
                                                    支付定金
                                                    </el-button>
                                                    <span v-else>
                                                    等待需求方支付定金
                                                    </span>
                                                </span>

                                                <span v-else-if="order.status === 2">
                                                    <el-upload class="upload-demo"
                                                               action=""
                                                               :on-change="fileUpload"
                                                               multiple
                                                               :limit="1"
                                                               :on-exceed="handleExceed"
                                                               :http-request="fileUpload"
                                                               :accept="'image/*,video/*,audio/*,file/*'"
                                                               v-if="order.receiveUsername === user.username">
                                                        <el-button @click="attachOrder(order)" class="go-btn"
                                                                   style="background-color: rgb(173,179,251);">
                                                            上传作品
                                                        </el-button>
                                                    </el-upload>
                                                    <span v-else="order.demandUsername === user.username">
                                                        等待承接者上传作品
                                                    </span>
                                                </span>

                                                <span v-else-if="order.status === 3">
                                                    <span v-if="order.receiveUsername === user.username">
                                                        <el-upload class="upload-demo"
                                                                   action=""
                                                                   :on-change="fileUpload"
                                                                   multiple
                                                                   :limit="1"
                                                                   :on-exceed="handleExceed"
                                                                   :http-request="fileUpload"
                                                                   :accept="'image/*,video/*,audio/*,file/*'"
                                                        >
                                                            <el-button @click="attachOrder(order.orderNum)"
                                                                       class="go-btn"
                                                                       style="background-color: rgb(173,179,251);">
                                                                上传作品
                                                            </el-button>

                                                        </el-upload>
                                                        <span class="upload-demo-receive">
                                                            等待需求者确认作品
                                                        </span>
                                                    </span>

                                                    <span v-else>
                                                        <a>
                                                            <el-button @click="downloadFile(order)" class="go-btn"
                                                                       style="background-color: rgb(173,179,251);">
                                                            下载作品
                                                            </el-button>
                                                        </a>
                                                        <el-button class="go-btn"
                                                                   style="background-color: rgb(173,179,251);"
                                                                   @click="payBalance(order)">
                                                            支付尾款
                                                        </el-button>
                                                    </span>
                                                </span>

                                                <span v-else-if="order.status === 4">
                                                    <span v-if="order.demandUsername === user.username">
                                                        <el-button @click="commentOrder(order)" class="go-btn"
                                                                   style="background-color: rgb(173,179,251);">
                                                            评论订单
                                                        </el-button>
                                                    </span>
                                                    <span v-else>
                                                        等待需求者完成评价
                                                    </span>
                                                </span>

                                                <span v-else-if="order.status === 5">
                                                    <el-collapse class="comment-style" accordion>
                                                      <el-collapse-item>
                                                        <template slot="title">
                                                          订单评论
                                                        </template>
                                                        <div>
                                                            <img style="border-radius: 100%;width: 50px;"
                                                                 :src="imgUrl+order.demands.user.userImg">
                                                            <span style="color: #adb3fb">&nbsp;{{order.demandUsername}}：</span>&nbsp;
                                                            <div style="margin-left: 50px;"
                                                                 v-if="order.orderComment.length!==0">
                                                                {{order.orderComment.orderCommentContent}}
                                                                <span style="color: rgba(203,203,203,0.9)">
                                                                    {{$moment(order.orderComment.createdTime).format("YYYY-MM-DD HH:mm:ss")}}
                                                                </span>
                                                            </div>

                                                        </div>
                                                      </el-collapse-item>

                                                    </el-collapse>
                                                    <span style="float: right;"
                                                          v-if="order.demandUsername === user.username">
                                                        订单已完成
                                                    </span>

                                                    <span v-else>
                                                        <el-button @click="replyComment(order)" class="go-btn"
                                                                   style="background-color: rgb(173,179,251);">
                                                            回复评论
                                                        </el-button>
                                                    </span>
                                                </span>

                                                <div v-else>
                                                    <el-collapse v-if="order.orderComment != null" class="comment-style" accordion>
                                                        <el-collapse-item>
                                                            <template slot="title">
                                                                订单评论
                                                            </template>
                                                            <div>
                                                                <img style="border-radius: 100%;width: 50px;"
                                                                     :src="imgUrl+order.demands.user.userImg">
                                                                <span style="color: #adb3fb">&nbsp;{{order.demandUsername}}：</span>&nbsp;
                                                                <div style="margin-left: 50px;"
                                                                     v-if="order.orderComment != null">
                                                                    {{order.orderComment.orderCommentContent}}
                                                                    <span style="color: rgba(203,203,203,0.9)">{{$moment(order.orderComment.createdTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
                                                                </div>

                                                            </div>
                                                            <div style="margin-left: 50px;">
                                                                <img style="border-radius: 100%;width: 30px;"
                                                                     :src="imgUrl+order.authorImg">
                                                                <span style="color: #adb3fb">&nbsp;{{order.receiveUsername}}&nbsp;</span>
                                                                <span>回复&nbsp;</span>
                                                                <span style="color: #adb3fb">{{order.demandUsername}}：&nbsp;</span>
                                                                <div style="margin-left: 30px;"
                                                                     v-if="order.orderComment != null">
                                                                    {{order.orderComment.replyContent}}
                                                                    <span style="color: rgba(203,203,203,0.9)">{{$moment(order.orderComment.replyTime).format("YYYY-MM-DD HH:mm:ss")}}</span>
                                                                </div>
                                                            </div>
                                                        </el-collapse-item>

                                                    </el-collapse>
                                                    <span style="float: right">
                                                    订单已完成
                                                </span>
                                                </div>


                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>


                    </el-form>

                </div>

            </div>
        </div>
        <el-dialog :visible.sync="visible" title="支付二维码" width="250px"
                   :close-on-click-modal="false">
            <img :src="qrcode">
        </el-dialog>
    </div>
</template>

<script setup>
  import {selectUser} from "@/assets/api/userApi";
  import {
    addRemark,
    aliPay,
    getPersonalOrders,
    receiveOrder,
    rejectOrder,
    uploadFile
  } from "@/assets/api/ordersApi";
  import {getCurrentInstance, onBeforeMount, ref} from "vue";
  import {ElMessage} from "element-plus";
  import {useRouter} from "vue-router";

  const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
  const router = useRouter();
  const active = ref("");
  const orders = ref([{orderComment: {}}]);
  const visible = ref(false);
  const isvisible = ref(false);
  const user = ref({});
  const shows = ref(3);
  const orderNum = ref('');
  const remarks = ref('');
  const demandRemarks = ref('');
  const receiveRemarks = ref('');
  const qrcode = ref('');
  const demandId = ref('');
  const receiveUserImg = ref('');
  const userData = ref({});
  const orderId = ref(0);

  const getUserInformation = () => {
    let data = {};
    data.userId = localStorage.userId;
    selectUser(data).then((res) => {
      user.value = res.data;
      user.username.value = localStorage.username;
    })
  };
  const pay = (order) => {
    genOrderNum();
    let data = {};
    data.subject = '定金';
    data.totalPrice = order.deposit.value;
    data.orderId = order.orderId.value;
    data.payTradeNum = order.orderNum.value;
    data.username = order.demandUsername.value;
    data.type = 1;
    aliPay(data).then((res) => {
      if (res.code === 200) {
        qrcode.value = 'data:image/png;base64,' + res.data;
        visible.value = true
      } else {
        ElMessage.error(res.message);
      }
    })
  };
  const payBalance = (order) => {
    genOrderNum();
    let data = {};
    data.subject = '尾款';
    data.totalPrice = order.balancePayment.value;
    data.orderId = order.orderId.value;
    data.payTradeNum = orderNum.value;
    data.username = order.demandUsername.value;
    data.type = 1;
    aliPay(data).then((res) => {
      if (res.code === 200) {
        qrcode.value = 'data:image/png;base64,' + res.data;
        visible.value = true
      } else {
        ElMessage.error(res.message);
      }
    })

  };
  const genOrderNum = () => {
    let time = new Date();
    let year = String(time.getFullYear());
    let mouth = String(time.getMonth() + 1);
    let day = String(time.getDate());
    let hours = String(time.getHours());
    let millSeconds = String(time.getMilliseconds());
    if (hours.length < 2) {
      hours.value = '0' + hours.value
    }
    let minutes = String(time.getMinutes());
    if (minutes.length < 2) {
      minutes.value = '0' + minutes.value
    }
    let seconds = String(time.getSeconds());
    if (seconds.length < 2) {
      seconds.value = '0' + seconds.value
    }
    let MillSeconds = String(time.getMilliseconds());
    if (seconds.length < 2) {
      millSeconds.value = '0' + millSeconds.value
    }
    orderNum.value = year.value + mouth.value + day.value + hours.value + minutes.value + seconds.value + MillSeconds.value + localStorage.userId
  };
  const getMyOrders = () => {
    let data = {};
    data.username = localStorage.getItem('username');
    getPersonalOrders(data).then((res) => {
      orders.value = res.data.data;
      for (let i = 0; i < res.data.data.length; i++) {
        comments[i].label.value = res.data.data[i].demandUsername + " : " + res.data.data[i].orderComment.orderCommentContent;
        comments[i].children[0].label.value = res.data.data[i].receiveUsername + " 回复 " + res.data.data[i].demandUsername + " : " + res.data.data[i].orderComment.replyContent;
      }

    });
  };
  const fileUpload = (file) => {
    let data = new FormData();
    data.append('orderNum', orderNum.value);
    data.append('file', file.raw.value);
    data.append('demandId', demandId.value);
    data.append('orderId', orderId.value);
    uploadFile(data).then((res) => {
      if (res.code === 200) {
        ElMessage.success("上传成功");
      }
      getMyOrders();
    })
  };
  const downloadFile = (order) => {
    window.location.href = order.filename.value;
  };
  const attachOrder = (order) => {
    orderNum.value = order.orderNum.value;
    demandId.value = order.demandId.value;
    orderId.value = order.orderId.value;
  };
  const addDemandRemarks = (order) => {
    let data = {};
    data.orderId = order.orderId.value;
    data.orderNum = order.orderNum.value;
    data.demandRemarks = order.demandRemarks.value;
    addRemark(data).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message);
      } else {
        ElMessage.error(res.message)
      }
    })
    getMyOrders();
  };
  const addReceiveRemarks = (order) => {
    let data = {};
    data.orderId = order.orderId.value;
    data.orderNum = order.orderNum.value;
    data.receiveRemarks = order.receiveRemarks.value;
    addRemark(data).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message);
      } else {
        ElMessage.error(res.message);
      }

    })
    getMyOrders();
  };
  const toReceiveOrder = (order) => {
    let data = {demandReceive: {}};
    data.orderId = order.orderId.value;
    data.orderNum = order.orderNum.value;
    data.demandReceive.demandUsername = order.demandUsername.value;
    data.demandReceive.receiveUsername = order.receiveUsername.value;
    data.demandReceive.deposit = order.deposit.value;
    data.demandReceive.balancePayment = order.balancePayment.value;
    data.demandReceive.totalPrice = order.totalPrice.value;
    data.demandReceive.demandId = order.demandId.value;
    data.demandReceive.createdTime = new Date();
    data.demandReceive.receiveTime = new Date();
    receiveOrder(data).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message);
      }
      getMyOrders();
    })
  };
  const toRejectOrder = (order) => {
    let data = {};
    data.orderNum = order.orderNum.value;
    data.orderId = order.orderId.value;
    rejectOrder(data).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.message);
      }
    })
    getMyOrders();
  };
  const handleExceed = (files, fileList) => {
    ElMessage.warning(`当前限制选择 1 个文件`);
  };
  const commentOrder = (order) => {
    router.push({path: "/commentOrder", query: {id: order.orderId}});
  };
  const replyComment = (order) => {
    router.push({path: "/replyComment", query: {id: order.orderId}});
  };

  onBeforeMount(() => {
    getUserInformation();
    getMyOrders();
  });

</script>

<style scoped>
    .p-user-center {
        position: relative;
        padding-top: 70px;
        padding-bottom: 120px;
        background: #f4f4f4;
    }

    .back-ground {
        background-image: url("../../assets/img/personalPageBg.png");
        background-repeat: repeat;
        background-size: 100% 100%;
        position: absolute;
        height: 300px;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }

    .page-body {
        width: 1200px;
        margin: 0 auto;
        z-index: 1;
        position: relative;
    }

    .user-profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        min-height: 160px;
    }

    .personalImg {
        height: 160px;
        width: 160px;
    }

    .avatar {
        height: 160px;
        width: 160px;
    }

    .c-face-img-con {
        display: inline-block;
        position: relative;
    }

    .user-info {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin-left: 40px;
    }

    .name-row {
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .name {
        font-size: 30px;
        color: #fff;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
    }

    .describe {
        height: 28px;
        font-size: 16px;
        color: #aaa;
        line-height: 21px;
        margin-top: 16px;
        word-break: break-all;
    }

    .icon-edit {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        color: #000;
        background: #fff;
        width: 50px;
        height: 50px;
        margin-top: 26px;
        font-size: 20px;
        text-decoration: none;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
        color: #adb3fb;
        text-decoration: none;
    }

    .left-nav {
        margin-top: 100px;
        width: 223px;
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        float: left;
        height: 700px;
    }

    .nav-item:not(:first-of-type) {
        margin-top: 20px;
    }

    .nav-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #2f2f2f;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        position: relative;
        text-decoration: none;
    }

    .fonts {
        font-size: 24px;
        margin-right: 10px;
    }

    .active {
        color: #adb3fb;
    }

    .content-header {
        width: 80%;
        height: 57px;
        background: #fff;
        border-radius: 4px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 20px 0 16px;
        font-size: 18px;
        font-weight: 600;
        color: #2f2f2f;
        float: right;
        margin-top: 100px;
    }

    .header-toolbar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }

    .root-provider {
        min-height: 400px;
    }

    .header-wrapper .header-title {
        line-height: 25px;
        color: #333;
        font-weight: 700;
        font-size: 14px;
    }

    .order-orderInfo {
        position: relative;
        padding-bottom: 5px;
        border-bottom: 1px dotted #80b2ff;
        height: 27px;
    }

    .order-itemInfo {
        display: inline-block;
        vertical-align: top;
    }

    .order-itemInfo .info-detail {
        width: 245px;
        padding: 10px 0 10px 10px;
    }

    .order-itemInfo .info-cell {
        display: inline-block;
        box-sizing: content-box;
        margin-right: 1px;
    }

    .order-itemInfo .info-msg {
        padding-left: 10px;
        vertical-align: top;
    }

    .order-itemInfo .info-title {
        color: #3c3c3c;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .order-itemInfo .info-require {
        color: #3c3c3c;
        vertical-align: top;
        display: inline-block;
        width: 150px;
        text-align: center;
        padding: 10px 0;
    }

    .order-itemInfo .info-price {
        color: #3c3c3c;
        vertical-align: top;
        display: inline-block;
        width: 250px;
        text-align: center;
        padding: 10px 0;
    }

    .item-row .item-row__price {
        display: inline-block;
        width: 100px;
        text-align: center;
        padding-right: 5px;
    }

    .item-row .item-row__price-item {
        padding: 10px 0 5px;
    }

    .label {
        display: inline-block;
        padding: 5px;
    }

    .textarea {
        position: relative;
        padding: 10px;
    }

    .textarea .textarea__title {
        vertical-align: top;
        display: inline-block;
    }

    .textarea .textarea__wrapper {
        display: inline-block;
    }

    .label__header {
        display: inline-block;
        width: inherit;
        text-align: right;
        color: #adb3fb;
    }

    .submitOrder-container {
        text-align: right;
        margin-top: -1px;
    }

    .submitOrder-container .wrapper {
        display: inline-block;
        padding: 0 0 5px 5px;
    }

    .submitOrder-container .go-back {
        color: #adb3fb;
        text-decoration: none;
        margin-right: 50px;
        line-height: 34px;
    }

    a {
        text-decoration: none;
        cursor: pointer;
    }

    .go-btn {
        display: inline-block;
        width: 182px;
        height: 39px;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        float: right;
    }

    .content-body {
        padding: 52px 39px 40px;
        background: #fff;
        border-radius: 4px;
        margin-top: 182px;
        width: 80%;
        max-width: 1199px;
        margin-left: 242px;
        height: 619px;
    }

    .div2 {
        border: 1px solid #cbcbcb;
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        flex-shrink: 0;
        padding: 10px;
        top: -50px;
        left: -25px;
    }

    .div1 {
        border: 0px solid black;
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        flex-shrink: 0;
    }

    .upload-demo {
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .upload-demo-receive {
        position: relative;
        margin-left: 170px;
    }

    /deep/ .el-upload__input {
        visibility: hidden !important;
    }

    /depp/ .el-upload-list__item-name {
        color: #606266;
        display: block;
        margin-right: 40px;
        overflow: hidden;
        padding-left: 44px;
        text-overflow: ellipsis;
        transition: color .3s;
        white-space: nowrap;
    }

    .btn-upload {
        top: 70px;
        right: 40px;
        position: fixed;
        z-index: 100;
        border-radius: 30px;
        box-shadow: 0 2px 12px 0 rgba(173, 179, 251, 0.9)
    }

    .el-upload {
        margin: 5px;
    }

    .__web-inspector-hide-shortcut__ {
        visibility: hidden !important;
    }

    .v-modal {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
        background: #0000;
    }

    .span-remarks {
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
        padding: 0px;
    }

    /deep/ .el-icon-caret-right:before {
        content: "";
    }

    .comment-style {
        width: 750px;
        float: left;
        margin-right: 100px;;
    }
</style>
